<template>
  <div>
    <h1>表格使用</h1>
    <el-table stripe
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        label="性别"
        width="180">
        <template slot-scope="scope">
           <span :class="{girl:scope.row.sex==0,boy:scope.row.sex==1}">{{scope.row.sex==0?"女":"男"}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            sex:0,
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '李白',
            sex:1,
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '李清照',
            sex:0,
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '诸葛亮',
            sex:1,
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
      methods:{
        handleClick(row){
            console.log("row",row);
        }
      }
    }
</script>

<style scoped>
.girl{background-color: red;color: white;padding: 5px 10px;}
.boy{background-color: blue;color: white;padding: 5px 10px;}
</style>